<template>
  <div class="bottomLeft">
    <div class="bg-color-black">
      <div class="box-title">
        <img :src="img" class="title-img" style="height: 16px" alt="" />
        薪资范围
      </div>
      <div>
        <div ref="chartRef" class="chartBox" />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, shallowRef, defineProps, watch } from "vue";
import * as echarts from "echarts";
import { getSalaryRange } from "@/api/dataView";

// 定义 ref
const props = defineProps(['selectId']);
const chartRef = ref();
const myChart = ref(null);
const img = ref(require("@/assets/three.png"));
const unwarp = (obj) => obj && (obj.__v_raw || obj.valueOf() || obj);

watch(()=>props.selectId, (newVal)=>{
  if(props.selectId || props.selectId == 0) {
    getData(newVal)
  }
},{
  immediate: true,
  deep: true
})

// 获取数据
async function getData(id) {
  const res = await getSalaryRange(id);
  let list1 = [];
  let list2 = [];
  if (res.data) {
    for (const key in res.data) {
      list1.push(key);
      list2.push(res.data[key]);
    }
  }
  let options = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
        crossStyle: {
          color: "#999",
        },
      },
    },
    color: {
      type: "linear",
      // x=0,y=1,柱子的颜色在垂直方向渐变
      x: 0,
      y: 1,
      colorStops: [
        // 0%处的颜色
        {
          offset: 0,
          color: "#2071d5",
        },
        // 50%处的颜色
        {
          offset: 0.5,
          color: "#0c3e8d",
        },
        // 100%处的颜色
        {
          offset: 1,
          color: "#091a39",
        },
      ],
      global: false, // 缺省为 false
    },
    grid: {
      top: "8%",
      bottom: "35%",
    },
    xAxis: [
      {
        data: list1,
        axisLabel: {
          rotate: 30,
          color: "white",
        },
      },
    ],
    yAxis: [
      {
        type: "value",
        axisLabel: {
          color: "white",
        },
      },
    ],
    series: [
      {
        name: "薪资",
        type: "bar",
        data: list2,
        tooltip: {
          show: false,
        },
      },
      {
        name: "薪资",
        type: "line",
        data: list2,
        symbolSize: 8,
        itemStyle: {
          normal: {
            color: "#f9ce5e",
            symbol: "emptyCircle",
            lineStyle: {
              color: "#f9ce5e",
            },
          },
        },
        tooltip: {
          valueFormatter: function (value) {
            return value + "个岗位";
          },
        },
      },
    ],
  };
  myChart.value = echarts.init(chartRef.value);
  unwarp(myChart.value).setOption(options);
  // console.log("resres", res);
}

onMounted(() => {
  // getData();
});
</script>

<style lang="scss" scoped>
$box-height: 420px;
$box-width: 100%;
.bottomLeft {
  padding: 20px 16px;
  height: $box-height;
  width: $box-width;
  border-radius: 5px;

  .box-title {
    height: 40px;
    border-left: 5px solid #409eff;
    background-color: #081f43;
    padding-left: 25px;
    box-sizing: border-box;
    position: relative;
    line-height: 40px;
    .title-img {
      position: absolute;
      left: 6px;
      top: 12px;
    }
  }
}
.chartBox {
  // width: 400px;
  height: 400px;
}
</style>
